{extend name="common/common" /}

{block name="content"}
<el-col :lg="12">
	<el-card class="box-card">
		<div slot="header">
			<span class="span-primary"><i class="el-icon-plus"></i></span>
			添加职员
		</div>
		<el-form label-width="80px" :model="form" :rules="rules" ref="form" inline>
			<el-form-item label="登陆账号" prop="user_name">
				<el-input v-model="form.user_name" required clearable></el-input>
			</el-form-item><br>
			<el-form-item label="职员角色" prop="role_id">
				<el-select v-model="form.role_id" placeholder="职员角色" filterable>
					{if !empty($role)}
					{foreach name="role" item="vo"}
					<el-option label="{$vo.role_name}" value="{$vo.id}"></el-option>
					{/foreach}
					{/if}
				</el-select>
			</el-form-item><br>
			<el-form-item label="所属部门" prop="depart_id">
				<el-input v-model="show_depart_name" clearable readonly placeholder="请选择所属部门"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="info" plain @click="selectDepart">选择</el-button>
			</el-form-item><br>
			<el-form-item label="数据权限" prop="data_auth_type">
				<el-select v-model="form.data_auth_type" placeholder="数据权限类型" filterable>
					<el-option label="仅自己" value="0"></el-option>
					<el-option label="所有人" value="1"></el-option>
					<el-option label="本部门" value="2"></el-option>
					<el-option label="本部门及子部门" value="3"></el-option>
				</el-select>
			</el-form-item><br>
			<el-form-item label="登陆密码" prop="password">
				<el-input v-model="form.password" clearable></el-input>
			</el-form-item><br>
			<el-form-item label="职员姓名" prop="real_name">
				<el-input v-model="form.real_name" clearable></el-input>
			</el-form-item><br>
			<el-form-item label="是否启用">
				<el-radio-group v-model="form.status">
					<el-radio :label="1">正常</el-radio>
					<el-radio :label="0">禁用</el-radio>
				</el-radio-group>
			</el-form-item><br>
			<el-form-item label=" ">
				<el-button type="primary" plain @click="subForm('form')">提交</el-button>
			</el-form-item>
		</el-form>
	</el-card>
</el-col>
{/block}

{block name="script"}
<script type="text/javascript">
var main = new Vue({
	el:"#main",
	data:function() {
		return {
			loading:false,
			show_depart_name:"",
			form:{
				staff_id:"{$staff_id|default=''}",
				user_name:"",
				role_id:"",
				password:"",
				real_name:"",
				status:1,
				depart_id:"",
				data_auth_type:"0"
			},
			rules:{
				user_name:[{required:true,message:'请输入登陆账号',trigger:['blur','change']}],
				role_id:[{required:true,message:'请选择职员角色',trigger:['blur','change']}],
				password:[{required:true,message:'请输入登陆密码',trigger:['blur','change']}],
				real_name:[{required:true,message:'请输入职员姓名',trigger:['blur','change']}],
				depart_id:[{required:true,message:'请选择职员部门',trigger:['blur','change']}],
				data_auth_type:[{required:true,message:'请选择数据权限类型',trigger:['blur','change']}],
			}
		}
	},
	methods:{
		subForm(form){
			this.$refs[form].validate((valid) => {
				if (valid) {
					var param = this.form;
					$.post("{:url('user/useradd')}",param,function(res){
						if(res.code == 1){
							main.$confirm('职员添加成功', '成功', {
								confirmButtonText: '确定',
								showClose:false,
								type: 'success',
								showCancelButton:false
							}).then(() => {
								window.location.href = res.data;
							});
						}else{
							main.$notify.error({title:'错误',message:res.msg});
						}
					})
				}
        	});
		},
		selectDepart() {
			deparTree.showDeparTree = true;
			$.getJSON("{:url('department/index')}",function(res){
				deparTree.deparTreeData = res.data;
				deparTree.exkeys = res.exkeys;
			})
		},
	}
})
</script>
{/block}

{block name="component"}
<div id="deparTreeBox">
	<el-dialog title="选择部门" :visible.sync="showDeparTree" top="5vh">
		<div class="treeBox">
			<el-tree
				:data="deparTreeData"
				:props="props"
				ref="deparTree"
				show-checkbox
				node-key="id"
				:default-expanded-keys="exkeys"
				check-strictly="true"
				@check-change="toRadio">
			</el-tree>
		</div>
		<div slot="footer" class="dialog-footer">
			<el-button @click="showDeparTree = false">取消</el-button>
			<el-button type="success" @click="sureDepart">保存</el-button>
		</div>
	</el-dialog>
</div>
<script type="text/javascript">
var deparTree = new Vue({
	el:"#deparTreeBox",
	data() {
		return {
			showDeparTree:false,
			deparTreeData:'',
			checkedTimes:0,
			props:{
				label:"name"
			},
			exkeys:[],
		}
	},
	methods:{
		sureDepart() {
			if(this.$refs.deparTree.getCheckedKeys().length == 0){
				main.form.depart_id = '';
				main.show_depart_name = '';
				main.$notify.error({title:"错误",message:"请选择职员部门"});
				return false;
			}else{
				this.showDeparTree = false;
				main.form.depart_id = this.$refs.deparTree.getCheckedKeys()[0];
				main.show_depart_name = this.$refs.deparTree.getCheckedNodes()[0].name;
			}
		},
		toRadio(data,checked, node) {
			this.checkedTimes++;
			if(this.checkedTimes%2==0){
			   if(checked){
				   this.$refs.deparTree.setCheckedNodes([]);
				   this.$refs.deparTree.setCheckedNodes([data]);
			   }else{
				   this.$refs.deparTree.setCheckedNodes([]);
			   }
			}
		}
	}
})
</script>
{/block}
